<template>
    <div class="content">
        <div class="box">
            <el-dropdown class="margins">
                <el-button>
                    矿业权<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item>矿点</el-dropdown-item>
                    <el-dropdown-item>矿权范围</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-button class="margins">地震动参数</el-button>
            <el-button class="margins" style="margin-left: 0;">历史地震</el-button>
            <el-dropdown class="margins">
                <el-button>
                    显示图幅编号<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                    <el-dropdown-item>1:20万</el-dropdown-item>
                    <el-dropdown-item>1:5万</el-dropdown-item>
                    <el-dropdown-item>1:1万</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="useUtilities" class="margins">
                <el-button>
                    实用工具<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item disabled>测量</el-dropdown-item>
                        <el-dropdown-item command="distance">距离</el-dropdown-item>
                        <el-dropdown-item command="area">面积</el-dropdown-item>
                        <el-dropdown-item divided disabled>标绘</el-dropdown-item>
                        <el-dropdown-item command="point">点</el-dropdown-item>
                        <el-dropdown-item command="linestring">线</el-dropdown-item>
                        <el-dropdown-item command="polygon">多边形</el-dropdown-item>
                        <el-dropdown-item command="rectangle">矩形</el-dropdown-item>
                        <el-dropdown-item command="circle">圆形</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="changeMapBasemap" class="margins">
                <el-button>
                    地图切换<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="images">影像图层</el-dropdown-item>
                        <el-dropdown-item command="electron">电子图层</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-button class="margins" style="margin-left: 0;">地质图</el-button>

            <el-button @click="changeMiningArea">切换显示矿区图层</el-button>
        </div>
        <div>
            <el-select
                v-model="searchType"
                placeholder="Select"
                @change="changeSearchType"
                style="width: 120px; margin-right: 10px;">
                    <el-option label="矿业权名称" :value="1" />
                    <el-option label="地理位置" :value="2" />
                    <el-option label="发证机关" :value="3" />
            </el-select>
            <el-input @change="searchMines" v-model="searchVal" style="width: 240px" class="margins" placeholder="请输入" />
            <el-button @click="pointSearch" class="margins" style="margin-left: 0;">选点查询</el-button>
            <el-dropdown @command="polygonSearch" class="margins">
                <el-button>
                    区划查询<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="polygon">多边形</el-dropdown-item>
                        <el-dropdown-item command="rectangle">矩形</el-dropdown-item>
                        <el-dropdown-item command="circle">圆形</el-dropdown-item>
                        <el-dropdown-item command="freehand">快速多边形</el-dropdown-item>
                        <el-dropdown-item command="angled-rectangle">倾斜矩形</el-dropdown-item>
                        <el-dropdown-item command="sensor">雷达梯形</el-dropdown-item>
                        <el-dropdown-item command="sector">扇形</el-dropdown-item>
                        
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="changeMiningRight" class="margins">
                <el-button>
                    矿权类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="0">全部矿权</el-dropdown-item>
                        <el-dropdown-item :command="1">探矿权</el-dropdown-item>
                        <el-dropdown-item :command="2">采矿权</el-dropdown-item>
                        <el-dropdown-item :command="3">国家规划</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-dropdown @command="changeMineralType" class="margins">
                <el-button>
                    矿种类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="images">全部矿种</el-dropdown-item>
                        <el-dropdown-item command="electron">煤矿</el-dropdown-item>
                        <el-dropdown-item command="electron">金矿</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

            <el-button @click="mapFlyToPosition">飞行到指定点</el-button>
        </div>
    </div>

    <el-dialog
        v-model="addZoningShow"
        title="新增区划"
        width="500"
        :close-on-click-modal="false"
    >
        <span>新增区划</span>
    </el-dialog>

</template>

<script setup>
import { nextTick, onMounted, ref, defineExpose } from 'vue';
import { getCurrentInstance } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { selectPolygonsByLocation, selectPolygonsByList, searchPolygons } from "@/api/map.js";

const { appContext } = getCurrentInstance();
const emitter = appContext.config.globalProperties.$emitter;
// 切换显示矿区图层
// miningArea-layer-symbol 矿区面图层
// miningArea-layer-fill 矿区文字标注图层
function changeMiningArea() {
  // 兄弟组件 发送事件
  emitter.emit('changeMapLevel', ['miningArea-layer-symbol', 'miningArea-layer-fill']);
}

function mapFlyToPosition(){
  // 兄弟组件 发送事件
  emitter.emit('changeMapFlyTo', {});
}

// 切换地图-底图图层
function changeMapBasemap(val){
    if(val == 'images'){ //影像图层
        emitter.emit('changeMapLevel', ['gaodeImage-tiles', 'gaodeImageAnnotation-tiles']);
    }else if(val == 'electron'){ // 电子图层
        emitter.emit('changeMapLevel', ['gaodeElectron-tiles']);
    }
}

// 切换地图-矿权
function changeMiningRight(val){
    emitter.emit('hideMapLevel'); //隐藏 底图图层 之外的所有图层
    changeMiningArea()
    emitter.emit('changeMiningRight', val);
}

// 切换地图-矿种
function changeMineralType(){

}


// 实用工具
const paintingType = ref('') //tool 工具  search 查询
function useUtilities(val){
    paintingType.value = 'tool'
    let goPainting = ''
    if(val == 'distance'){  //测量
        goPainting = 'linestring'
        emitter.emit('changeMeasureTools', goPainting);
    }else if(val == 'area'){  //测量
        goPainting = 'polygon'
        emitter.emit('changeMeasureTools', goPainting);
    }else{ //新增
        goPainting = val
        emitter.emit('changePaintingTools', goPainting);
    }
}

// 输入查询
const searchType = ref(1)
const searchVal = ref('')
function changeSearchType(){
    searchVal.value = ''
}

function searchMines(val){
    emitter.emit('hideMapLevel'); //隐藏 底图图层 之外的所有图层
    const obj = {
        page: 1,
        pageSize: 10,
        name: searchType.value==1?val:undefined, //矿权名称搜索
        location: searchType.value==2?val:undefined, //地理位置搜索
        issueAuthority: searchType.value==3?val:undefined //发证机关搜索
    }
    const loadingInstance = ElLoading.service({ fullscreen: true, background: 'rgba(0, 0, 0, 0.7)', text: '查询中...' })
    searchPolygons(obj).then(response => {
        loadingInstance.close()
        emitter.emit('customizePolygon', response.records);
    });
}

// 点查询
function pointSearch(){
    emitter.emit('hideMapLevel'); //隐藏 底图图层 之外的所有图层
    paintingType.value = 'search'
    emitter.emit('changePaintingTools', 'point');
}

// 面查询
function polygonSearch(val){
    emitter.emit('hideMapLevel'); //隐藏 底图图层 之外的所有图层 
    paintingType.value = 'search'
    emitter.emit('changePaintingTools', val);
}

// 监听事件
const addZoningShow = ref(false)
onMounted(() => {
    // 监听 绘画完成
    emitter.on('paintingCompleted', (feature) => {
        console.log('绘画的实体:', '绘画类型：' + paintingType.value, feature);
        if(paintingType.value === 'tool'){
            addZoningShow.value = true
        }else if(paintingType.value === 'search'){
            // 加载loading
            const loadingInstance = ElLoading.service({ fullscreen: true, background: 'rgba(0, 0, 0, 0.7)', text: '查询中...' })
            if(feature.properties.mode === 'point'){ //点查询
                const queryParams = {
                    longitude: feature.geometry.coordinates[0],
                    latitude: feature.geometry.coordinates[1],
                    radius: 10 //米
                }
                selectPolygonsByLocation(queryParams).then(response => {
                    loadingInstance.close()
                    emitter.emit('customizePolygon', response);
                });
            }else{ // 面查询
                const queryParams = []
                for(let item of feature.geometry.coordinates[0]){
                    queryParams.push({longitude: item[0], latitude: item[1]})
                }
                selectPolygonsByList(queryParams).then(response => {
                    loadingInstance.close()
                });

            }
        }
    })
})


</script>


<style scoped>
.content{
    padding: 10px 0;
}
.box{
    margin-bottom: 10px;
}
.margins{
    margin-right: 10px;
}
</style>